<template>
	<view class="order-card">
		<view class="order-card__header u-flex u-flex-between">
			<u--text :text="`下单时间：${createTime}`" type="info"></u--text>
			<u--text :text="getOrderStateText(orderState,refundState)"></u--text>
		</view>
		<view class="order-card__content flex-primary">
			<image style="width: 200rpx;" mode="widthFix" :src="imgUrl"></image>
			<view class="" style="width: 330rpx;">
				<u--text :text="goodName"></u--text>
			</view>
			<view class="">
				<u--text :text="`¥${price}`" type="error"></u--text>
			</view>
		</view>
		<view class="order-card__footer" v-if="sendTime">
			<u--text :text="`上门时间：${sendTime}`"></u--text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			createTime: String,
			sendTime: String,
			imgUrl: {
				type: String,
				default: '/static/logo.png'
			},
			goodName: String,
			price: String,
			orderState: Number | String,
			refundState: Number | String,
		},
		data() {
			return {}
		},
		methods: {}
	}
</script>

<style lang="scss">
	.order-card {
		width: 680rpx;
		padding: 10rpx;
		background-color: #fff;
		margin: 30rpx auto 0rpx;
		border-radius: 24rpx;

		&__header {
			padding: 10rpx 15rpx;
			border-bottom: solid 1rpx #e8e8e8;
		}

		&__content {
			padding: 15rpx;
		}

		&__footer {
			border-top: solid 1rpx #e8e8e8;
			padding: 15rpx;
		}
	}
</style>